{% block sw_sales_channel_products_assignment_dynamic_product_groups %}
<div
    v-if="productStreams"
    class="sw-sales-channel-products-assignment-dynamic-product-groups"
>
    {% block sw_sales_channel_products_assignment_dynamic_product_groups_info_text %}
    <mt-banner ref="alert">
        {{ $tc('sw-sales-channel.detail.productAssignmentModal.dynamicProductGroups.infoText') }}
    </mt-banner>
    {% endblock %}

    {% block sw_sales_channel_products_assignment_dynamic_product_groups_listing %}
    <mt-card
        :is-loading="isProductLoading"
        position-identifier="sw-sales-channel-products-assignment-dynamic-product-groups"
    >
        <template #grid>
            {% block sw_sales_channel_products_assignment_dynamic_product_groups_listing_container %}
            <div :style="containerStyle">
                {% block sw_sales_channel_products_assignment_dynamic_product_groups_listing_section %}
                <sw-card-section
                    ref="cardSectionSecondary"
                    secondary
                    divider="bottom"
                >
                    {% block sw_sales_channel_products_assignment_dynamic_product_groups_listing_search %}
                    <sw-simple-search-field
                        v-model:value="term"
                        variant="form"
                        size="small"
                        :placeholder="$tc('sw-sales-channel.detail.productAssignmentModal.dynamicProductGroups.searchFieldPlaceholder')"
                        @search-term-change="onSearch"
                    />
                    {% endblock %}
                </sw-card-section>
                {% endblock %}

                {% block sw_sales_channel_products_assignment_dynamic_product_groups_card_section_primary %}
                <sw-card-section class="sw-sales-channel-products-assignment-dynamic-product-groups__card-section-primary">
                    {% block sw_sales_channel_products_assignment_dynamic_product_groups_listing_entity %}
                    <sw-entity-listing
                        v-if="productStreams.length > 0"
                        ref="productStreamListing"
                        identifier="sw-sales-channel-products-assignment-dynamic-product-groups-listing"
                        :items="productStreams"
                        :data-source="productStreams"
                        :columns="productStreamColumns"
                        :repository="productStreamRepository"
                        :is-loading="isProductStreamsLoading"
                        :skeleton-item-amount="limit"
                        :plain-appearance="true"
                        :show-settings="false"
                        :allow-column-edit="false"
                        :allow-inline-edit="false"
                        @selection-change="onSelect"
                        @select-item="onSelect"
                        @select-all-items="onSelect"
                    >
                        <template #bulk>
                            {% block sw_sales_channel_products_assignment_dynamic_product_groups_listing_bulk %}
                            <span></span>
                            {% endblock %}
                        </template>

                        <template #delete-action="{ item }">
                            {% block sw_sales_channel_products_assignment_dynamic_product_groups_listing_delete_action %}
                            <span
                                class="sw-sales-channel-products-assignment-dynamic-product-groups__link-open"
                                role="button"
                                tabindex="0"
                                @click="onOpen(item)"
                                @keydown.enter="onOpen(item)"
                            >
                                {{ $tc('global.default.open') }}
                            </span>
                            {% endblock %}
                        </template>

                        <template #pagination>
                            {% block sw_sales_channel_products_assignment_dynamic_product_groups_listing_pagination %}
                            <sw-pagination
                                v-bind="{ page, limit, total }"
                                :total-visible="3"
                                :auto-hide="false"
                                @page-change="onPaginate"
                            />
                            {% endblock %}
                        </template>
                    </sw-entity-listing>
                    {% endblock %}

                    {% block sw_sales_channel_products_assignment_dynamic_product_groups_listing_empty %}
                    <sw-empty-state
                        v-if="productStreams.length <= 0"
                        :show-description="false"
                        :title="productStreams.length <= 0 && term
                            ? $tc('sw-sales-channel.detail.productAssignmentModal.dynamicProductGroups.titleNoProductStreamsMatching')
                            : $tc('sw-sales-channel.detail.productAssignmentModal.dynamicProductGroups.titleNoProductStreamsAvailable')
                        "
                    >
                        <template #icon>
                            {% block sw_sales_channel_products_assignment_dynamic_product_groups_listing_empty_icon %}
                            <img
                                :src="assetFilter('/administration/administration/static/img/empty-states/products-empty-state.svg')"
                                alt=""
                            >
                            {% endblock %}
                        </template>
                    </sw-empty-state>
                    {% endblock %}
                </sw-card-section>
                {% endblock %}
            </div>
            {% endblock %}
        </template>
    </mt-card>
    {% endblock %}
</div>
{% endblock %}
